<template>
  <div class="article-main">
    <div class="article-header">
      <div class="article-title">
        <el-tag effect="dark" :size="getSize">{{ article.categoryName }}</el-tag>
        <div class="article-title-content">{{ article.title }}</div>
      </div>
      <div class="article-message">
        <span>{{ article.time }}</span>
        <i class="el-icon-view" style="margin-left: 1rem"><span style="margin-left: 2px">{{ article.view }}</span></i>
      </div>
    </div>
    <v-md-preview :text="content" right-toolbar="toc"></v-md-preview>
    <Issue :article-id="article.id"></Issue>
  </div>
</template>

<script lang="ts">
import { defineComponent, reactive, ref, onMounted} from 'vue'
import { useRoute,useRouter } from "vue-router";
import {getMarkDown, findArticle} from "@/api/article";
import Issue from '../components/Issue.vue'
import {IArticle} from "@/interface/article";

export default defineComponent({
  name: "Article",
  components: {
    Issue
  },
  computed: {
    getSize() {
      if(window.screen.width > 750) {
        return ''
      }
      else {
        return 'mini'
      }
    }
  },
  setup() {
    const route = useRoute()
    let articleId:any = route.query.id
    let name = route.query.name
    if(articleId) {
      localStorage.setItem('articleId',articleId.toString())
    }else {
      articleId = localStorage.getItem('articleId')
    }
    if(!articleId) {
      const router = useRouter()
      router.push('/404')
    }
    if(name){
      localStorage.setItem('issueName',name.toString())
    }else {
      name = localStorage.getItem('issueName')
    }
    const article = reactive<IArticle>({
      id:Number.parseInt(articleId),
      title:'',
      time: '',
      view: 123,
      categoryName: '',
      url: '/markdown/Vue3.md'
    })
    const content = ref('')
    onMounted(() => {
      findArticle(article.id).then(res => {
        article.title = res.data.data.title
        article.time = res.data.data.time
        article.view = res.data.data.view
        article.categoryName = res.data.data.categoryName
        article.url = '/markdown' + res.data.data.url
        getMarkDown(article.url).then(response => {
          if(response.status === 200) {
            content.value = response.data
          }
        })
      })
    })
    // getMarkDown(article.url).then(response => {
    //   if(response.status === 200) {
    //     content.value = response.data
    //   }
    // })
    return {
      article,
      content
    }
  }
})
</script>

<style scoped>
@media screen and (max-height: 750px){
  .article-main {
    padding: 1rem;
  }
  .article-header {
    padding: 0;
  }
  .article-title {
    display: flex;
    align-items: flex-end;
    font-size: 1rem;
  }
  .article-message {
    color: #999;
    font-size: 12px;
    margin-top: 12px;
    line-height: 12px;
    display: flex;
    align-items: center;
  }
  .article-title-content {
    margin-left: 0.5rem;
  }
  /deep/ .github-markdown-body {
    padding: 1rem 0 0 0;
  }
}
@media screen and (min-height: 751px){
  .article-main {
    max-width: 1000px;
    margin: 0 auto;
    padding: 2rem 2.5rem;
  }
  .article-header {
    padding: 1rem 2rem 1rem 2rem;
  }
  .article-title {
    display: flex;
    align-items: flex-end;
    font-size: 1.6rem;
  }
  .article-message {
    color: #999;
    font-size: 16px;
    margin-top: 13px;
    line-height: 16px;
    display: flex;
    align-items: center;
  }
  .article-title-content {
    margin-left: 1rem;
  }
}

</style>
